<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>安手账</title>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <script>
        //获取地址栏参数的函数
        function getUrlParms(para){
            var search=location.search; //页面URL的查询部分字符串
            var arrPara=new Array(); //参数数组。数组单项为包含参数名和参数值的字符串，如“para=value”
            var arrVal=new Array(); //参数值数组。用于存储查找到的参数值

            if(search!=""){
                var index=0;
                search=search.substr(1); //去除开头的“?”
                arrPara=search.split("&");

                for(i in arrPara){
                    var paraPre=para+"="; //参数前缀。即参数名+“=”，如“para=”
                    if(arrPara[i].indexOf(paraPre)==0&& paraPre.length<arrPara[i].length){
                        arrVal[index]=decodeURI(arrPara[i].substr(paraPre.length)); //顺带URI解码避免出现乱码
                        index++;
                    }
                }
            }

            if(arrVal.length==1){
                return arrVal[0];
            }else if(arrVal.length==0){
                return null;
            }else{
                return arrVal;
            }
        };

        $(function(){
            var data4Vue = {
                uri:'updatetlist',
                beans: [],
                tlist: {in_ex:'',amount:'',tid:'',remarks:'',datetime:''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.list();
                },
                methods: {
                    list:function(){
                        var url =  this.uri;
                        axios.get(url).then(function(response) {
                            vue.beans = response.data;
                        });
                    },
                    updatebill:function(){
                        var id = getUrlParms("id");
                        var url = this.uri+"/"+id;
                        if(0==this.tlist.in_ex.length){
                            $("span.errorMessage").html("收支选项不可为空");
                            $("div.updatebillErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.tlist.amount){
                            $("span.errorMessage").html("金额不可为空");
                            $("div.updatebillErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.tlist.tid.length){
                            $("span.errorMessage").html("分类不可为空");
                            $("div.updatebillErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.tlist.datetime){
                            $("span.errorMessage").html("时间不可为空");
                            $("div.updatebillErrorMessageDiv").css("visibility","visible");
                            return;
                        }

                        axios.put(url,this.tlist).then(function(response) {
                            var result = response.data;
                            if(result.code==0){
                                alert("更新成功");
                                location.href="index";
                            }
                            else{
                                $("span.errorMessage").html(result.message);
                                $("div.loginErrorMessageDiv").css("visibility","visible");
                            }
                        });
                    }

                },

            });
        });

    </script>
</head>
<body ng-app="app" ng-controller="MainController">
<h1>安手账更新账单</h1>
<div id="workingArea">
    <div class="updatebillDiv">
        <div class="updateillErrorMessageDiv">
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <span class="errorMessage"></span>
            </div>
        </div>
        <table cellspacing="1" style="background-color: #a0c6e5">
            <tr>
                <td>收入 or 支出</td>
                <td><input name="in_ex" v-model="tlist.in_ex" type="radio" value="0"/>支出
                    <input name="in_ex" v-model="tlist.in_ex" type="radio" value="1"/>收入
                </td>
            </tr>
            <tr>
                <td>金额：</td>
                <td><input  v-model="tlist.amount" type="text"/></td>
            </tr>
            <tr >
                <td>分类:</td>
                <td v-for="bean in beans">{{bean.id}} {{bean.type}}</td>
                <td>
                    <select v-model="tlist.tid">
                        <option disabled value="">请选择</option>
                        <option v-for="bean in beans">{{bean.id}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>备注：</td>
                <td><input  v-model="tlist.remarks" type="text"/></td>
            </tr>
            <tr>
                <td>时间：</td>
                <td><input v-model="tlist.datetime" type="datetime-local" > </td>
            </tr>
        </table>
        <a  @click="updatebill"><input type="button" value="确认"/></a>
    </div>
</div>
</body>
</html>